<template>
  <view class="container">
    <view class="top">
      <view class="checkbox">
        <uni-data-checkbox
          v-model="state.select_type"
          :localdata="typeListOption"
          @change="typeChange"
          mode="button"
          style="font-size: 12px"
        ></uni-data-checkbox>
      </view>
      <view class="checkbox">
        <uni-data-checkbox
          v-model="state.select_subject"
          :localdata="subjectListOption"
          @change="subjectChange"
          mode="tag"
        ></uni-data-checkbox>
      </view>
      <view class="checkbox">
        <text class="text">已做题：</text>
        <uni-data-checkbox v-model="state.select_has_done" :localdata="hasDoneDOption"
          @change="hasDoneChange"></uni-data-checkbox>
      </view>
    </view>
    <view class="card">
      <uni-card
        v-for="(item, index) in exerciseKnowledgeList"
        :key="index"
        :title="item.name"
        @click="onClickCard(item)"
      >
        <view class="card_item">
          <text class="blue_color">已做{{ item.has_done }}题，</text>
          <text class="green_color">共有{{ item.questions_amount }}题</text>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { checkItem, ExerciseKnowledgepointItem, KnowledgeItem } from '@/types/home'
import { getShuatiCatalogueAPI, getTopNodeAPI } from '@/services/home'
import UniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app'

const exerciseKnowledgeList = ref<ExerciseKnowledgepointItem[]>([])
// 存放响应式变量
const state = reactive({
  select_type: 1,
  select_subject: 1,
  select_has_done: 1,
  select_knowledgepoint: 1,
})
// 选择框列表
const subjectListOption = ref<checkItem[]>([])
let typeListOption = ref<checkItem[]>([
  { text: '按知识点', value: 1, disable: false },
  { text: '按试卷', value: 2, disable: false },
])
// tag的样式列表
const tagTypeList = ['default', 'primary', 'success', 'warning', 'error', 'royal']
// 根据index按顺序显示颜色
const tagColor = (index: number) => {
  return tagTypeList[index % 6]
}
// 点击卡片，进入该知识点的题目页面
const onClickCard = (knowledgepoint: ExerciseKnowledgepointItem) => {
  let knowledgepoint_id: number = knowledgepoint.id
  let knowledgepoint_name: string = knowledgepoint.name
  let questions_amount: number = knowledgepoint.questions_amount
  console.log('切换页面')
  if (questions_amount > 0) {
    uni.navigateTo({
      url: `/pages/puzzle/shuati_step_two?has_done=${state.select_has_done}&id=${knowledgepoint_id}&name=${knowledgepoint_name}&type=knowledgepoint`,
    })
  } else {
    uni.showToast({ icon: 'error', title: '本栏目暂无题目' })
  }
}
// 已做题选择框列表
const hasDoneDOption: checkItem[] = [
  { text: '还要', value: 1, disable: false },
  { text: '跳过', value: 2, disable: false },
]
// 刷题方式改变了，切换到该页面或tarbar，根据选择的值判断
const typeChange = (e: any) => {
  console.log('做题方式改变：', e)
  if (parseInt(e.detail.value) == 2) {
    uni.navigateTo({
      url: `/pages/puzzle/shuati_paper_one`,
    })
  }
}
// 学科改变了,重新获取该学科的知识点
const subjectChange = (e: any) => {
  // console.log('e.detail.value:', e.detail.value)
  state.select_subject = e.detail.value
  getExerciseKnowledgeData()
}
// 已做题目筛选改变了
const hasDoneChange = (e: any) => {
  state.select_has_done = e.detail.value
}

// 获取某个一级目录下的二级目录数据
const getExerciseKnowledgeData = async () => {
  // 获取知识点api的参数
  let subjectParams = {
    subject_id: state.select_subject,
  }
  const res = await getShuatiCatalogueAPI(subjectParams)
  console.log('知识点：', res)
  if (res.code == 200) {
    exerciseKnowledgeList.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '获取失败' })
  }
}
// 获取一级目录的数据
const getTopNodeData = async () => {
  const res = await getTopNodeAPI()
  console.log('一级目录：', res)
  if (res.code == 200) {
    subjectListOption.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '获取一级目录失败' })
  }
}
// 页面初始化加载事件
onLoad(async () => {
  // console.log('页面加载')
  getExerciseKnowledgeData()
  getTopNodeData()
})
// 页面初始化加载事件
onShow(() => {
  state.select_type = 1
  // getExerciseKnowledgeData()
  // getTopNodeData()
})
// 自定义下拉刷新被触发
onPullDownRefresh(async () => {
  await Promise.all([getExerciseKnowledgeData()])
  // 停止页面加载动画
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.container {
  margin: 1rpx;
  padding: 1rpx;
  display: flex;
  flex-direction: column;
  // flex: 1;
  min-height: 400rpx;
}

.top {
  // position: fixed;
  // top: calc(10rpx);
  // bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.checkbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;
  font-size: 32rpx;
}

.text {
  font-size: 28rpx;
}

.notice {
  font-size: 25rpx;
}

.card {
  // position: fixed;
  display: flex;
  flex-direction: column;
  font-size: 28rpx;
  margin-top: 3rpx;
  padding: 2rpx;
  // top: 240rpx;
  // height: calc(100% - 300rpx);
  .green_color {
    color: green;
  }
  .blue_color {
    color: blue;
  }
}
.card_item {
  display: flex;
  flex-direction: row;
}
</style>
